<script setup lang="ts">
import {ref} from "vue";
import MyInput from "@/vueTest/c/04_v-model/MyInput.vue";

let username = ref('zhangsan')
const password = ref('xxx')
</script>

<template>
<h2>父组件</h2>
  <h3>用户名：{{username}}</h3>
  <h3>密码：{{password}}</h3>
<!--  v-model用在html标签上-->
<!--  <input type="text" 04_v-model="username">-->
<!--  <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value">-->

<!--  v-model用在组件上-->
<!--  <MyInput 04_v-model="username"/>-->
<!--  对于原生事件，$event就是事件对象，得.target；对于自定义事件，$event就是触发事件时，所传递的数据-->
<!--<MyInput :modelValue="username" @update:modelValue="username = $event"/>-->

<!--  修改modelValue-->
  <MyInput v-model:ming="username" v-model:mima="password"/>
</template>

<style scoped>

</style>